<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <!-- Bootstrap v3.3.4 核心 CSS 文件 -->
    <link rel="stylesheet" href="../css/bootstrap.min.css">
    <script src="../js/jquery.min.js"></script>
    <!-- Bootstrap v3.3.4 核心 JavaScript 文件 -->
    <script src="../js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="../css/sqh_style_v2.0.css">
    <script src="../js/jquery.validate.min.js"></script>
    <script src="../js/sqh_wap.js"></script>
    <script src="../js/sqh_js_v2.0.js"></script>
    <title>经纪人登录</title>
</head>
<body class="">

    <div class="container-fluid bg_232323 color_fff padding_top_10 padding_bottom_10">
        <a href="http://www.baidu.com">
            <div class=" col-xs-2">
                <span class="icon iconfont color_fff" aria-hidden="true">&#xe608;</span>
            </div>
        </a>
        <div class="col-xs-8 text-center">
            <span class="font_18"  role="button" aria-expanded="false">经纪人登录</span>
        </div>
        <div class="col-xs-2">
            <div class="col-xs-2 text-right">
            </div>
        </div>
    </div>

<form id="myform">
    <div class="line_height_40px container-fluid border_b_top_eee border_b_bottom_eee margin_top_10">
        <div class="">
            <div class="width_60px float_left">
                手机号
            </div>
            <div class="margin_left_60 relative">
                <input type="tel" id="phoneNumber" name="phoneNumber" class="clear_border all_width padding_right_25" placeholder="请输入手机号" maxlength="11">
                <span class="absolute padding_top_10" style="top: 0;right: 0;" onclick="clearNumber()">
                    <img src="../img/tsdd/icon_del.png" onclick="" class="img-responsive width_20px ">
                </span>
            </div>
        </div>

        <div class="border_b_top_eee">
            <div class="width_60px float_left">
                密　码
            </div>
            <div class="margin_left_60 relative">
                <input type="password" name="pwd" id="pwd" class="clear_border all_width padding_right_25" placeholder="请输入密码" maxlength="16">
                <span class="absolute padding_top_15" style="top: 0;right: 0;" onclick="showOrHidePwd(this)">
                    <img src="../img/tsdd/icon_see.png" onclick="" class="img-responsive width_23px ">
                </span>
            </div>
        </div>

    </div>

    <div class="container-fluid line_height_40px margin_top_15">
        <div class="btn_gray all_width font_16" onclick="btnCommit(this)" id="submitBtn">确定</div>
        <input type="submit" value="确定" class="display_none" id="formSubmit">
    </div>
</form>

    <div class="line_height_40px">
        <div class="col-xs-6 color_99 text-left">
            <span class="pointer">找回密码</span>
        </div>
        <div class="col-xs-6 color_4996f6 text-right">
            <span class="pointer">
                快速注册
            </span>
        </div>
    </div>

</body>

<script>
    $(function(){
        //绑定keyup事件
        phoneNumber.onkeyup = changeBtn;
        pwd.onkeyup = changeBtn;

        //只允许输入数字
        inputNumberOnly("#phoneNumber");

    });

    //检查是否输入，是否允许输入按钮
    function changeBtn(){
        var phoneNumber = document.getElementById("phoneNumber").value;
        var pwd = document.getElementById("pwd").value;
        if(phoneNumber.length > 0 && pwd.length > 0){
            $("#submitBtn").removeClass("btn_gray").addClass("btn_blue");
        }else{
            $("#submitBtn").removeClass("btn_blue").addClass("btn_gray");
        }
    }

    //检查号码是否满足要求
    function isPhoneNumber(){
        var phoneNumber = document.getElementById("phoneNumber").value;
        var result = phoneNumber.isPhoneNumber();
        if(!result){
            alert("手机号不正确");
        }
        return result;
    }

    function clearNumber(){
        document.getElementById("phoneNumber").value="";
    }

    //检查密码
    function checkPwd(){
        var pwd = document.getElementById("pwd").value;
        if(pwd.length < 7){
            alert("密码长度小于7");
            return false;
        }else{
            return true;
        }
    }

    //显示或者隐藏密码
    function showOrHidePwd(obj){
        var imgObj = $($(obj).find("img"));
        //显示密码
        if(imgObj.attr("src").indexOf("icon_see")>0){
            $("#pwd").attr("type","text");
            imgObj.attr("src","../img/tsdd/icon_hide.jpg");
        }else{
            $("#pwd").attr("type","password");
            imgObj.attr("src","../img/tsdd/icon_see.png");
        }
    }

    //提交表单
    function btnCommit(obj){
        var currentObj = $(obj);
        if(currentObj.hasClass("btn_gray")){
            return false;
        }
        if(isPhoneNumber() && checkPwd()){
            document.getElementById("formSubmit").click();
        }
    }

</script>

</html>
